<template>
  <div class="avatar-container">
    <img v-if="src" :style="sizeStyle" :src="src" alt="" class="img-avatar">
    <div v-else :style="sizeStyle" class="word">{{word}}</div>
  </div>
</template>

<script>
export default {
  name: 'Avatar',
  props: {
    word: {
      type: String,
      required: false
    },
    src: {
      type: String,
      required: false
    },
    size: {
      type: Number,
      required: false,
      default: 40
    }
  },
  computed: {
    sizeStyle () {
      let result = {
        width: this.size + 'px',
        height: this.size + 'px'
      }

      if (this.word) {
        result['font-size'] = this.size / 2 + 'px';
      }

      return result;
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-container {
  display: inline-block;

  .word {
    background-color: blue;
    color: #fff;
    border-radius: 50%;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .img-avatar {
    border-radius: 50%;
    display: block;
  }
}
</style>
